<template>
  <Modal class="select-company-model" v-model="modal" width='800' :title="title">
    <div class="h400 scroll" style="height: 400px">
      <div class="fleft">
        <span class="mr" style="flex: 0 0 80px">选择部门: </span>
        <span style="flex: 1">
          <Select class="dptSelect" ref="select">
            <DepartmentRadio v-if="modal" v-model="currValue" @input='onChangeDpt' />
          </Select>
        </span>
      </div>
      <Row class="company-get fleft mt mb">
        <span class="mr" style="flex: 0 0 80px">搜索经销商: </span>
        <Input v-model.trim="name" search enter-button placeholder="经销商名称或手机号查询" type="text" @on-search='onSearch' />
      </Row>
      <div>
        <Table
          stripe
          height='270'
          :columns="list.columns"
          :data="list.data"
          @on-select='onSelect'
          @on-select-cancel='onSelectCancel'
          @on-select-all='onSelectAll'
          @on-select-all-cancel='onSelectAllCancel'
        ></Table>
        <div class="mt pr between">
          <span>已选：{{selectedDepart.length}} 个</span>
          <Page
            :total="list.totalItem"
            show-total
            :page-size='20'
            @on-page-size-change="onPageSizeChange"
            @on-change="onPageChange"
          />
        </div>
      </div>
    </div>
    <div slot="footer">
        <Button @click="closeModal" size="large" type="text">取消</Button>
        <Button @click="onSave" type="primary" size="large">确认</Button>
    </div>
    <Loader :status="list.status" @refresh="getDistributorData"></Loader>
  </Modal>
</template>
<script>
import AreaSelect from '~/AreaSelect';
import DepartmentRadio from "~/DepartmentRadio";

export default {
  components: {
    AreaSelect,
    DepartmentRadio
  },
  data() {
    return {
      modal: false,
      status: 'pass',
      title: '新增经销商',
      isSelectAll: false,
      currValue: '',
      selectedArea: {
        provinceId: '',
        areaId: '',
        cityId: ''
      },
      list: {
        status: 'pass',
        totalItem: 1,
        pageSize: window.$pageSize,
        currentPage: 1,
        form: {
          companyname: '',
        },
        columns: [
          { type: 'selection', width: 60, align: 'left' },
          { title: '联系人', key: 'distributorContactName', align: 'left' },
          { title: '手机号', key: 'distributorContactPhone', align: 'left' },
          { title: '经销商名', key: 'distributorName', align: 'left', },
        ],
        data: []
      },
      name: '',
      selectedDepart: []
    }
  },
  computed: {
  },
  methods: {
    onSelect (selection, row) {
      this.pushOnNotExit(row)
    },
    onSelectCancel (selection, row) {
      this.removeOnExit(row)
    },
    onSelectAll (val) {
      val.forEach(item => {
        this.pushOnNotExit(item)
      })
    },
    onSelectAllCancel (val) {
      this.list.data.forEach(item => {
        this.removeOnExit(item)
      })
    },
    pushOnNotExit (val) {
      if (!this.selectedDepart.find(item => item.distributorId === val.distributorId)) {
        this.selectedDepart.push(val)
      }
    },
    removeOnExit (val) {
      this.selectedDepart = this.selectedDepart.filter(item => item.distributorId !== val.distributorId)
    },
    onSearch (val) {
      // this.name = val
      this.list.currentPage = 1
      this.getDistributorData()
    },
    onChangeDpt (val, node) {
      this.$refs.select.hideMenu()
      this.$refs.select.values = [{ value: node.id, label: node.name }]
    },
    onPageChange(number) {
      this.list.currentPage = number;
      this.getDistributorData();
    },
    getDistributorData() {
      let param = {
        current: this.list.currentPage,
        size: this.list.pageSize,
        keyword: this.name
      };
      this.list.status = "loading";
      this.$jsonPost(`/department/queryUnBindDistributor`, param).then(data => {
          this.list.totalItem = Number(data.total);
          this.list.data = (data.records || []).map(item => {
            item._checked = !!this.selectedDepart.find(s => s.distributorId === item.distributorId)
            return item
          });
          this.list.status = "pass";
        })
        .catch(() => {
          this.list.status = "error";
        });
    },
    onSave() {
      if (!this.currValue) {
        this.$Notice.warning({ title: "请选择部门" })
        return
      }
      if (!this.selectedDepart.length) {
        this.$Notice.warning({ title: "请选择经销商" })
        return
      }
      let arr = this.selectedDepart.map(item => {
        return {
          departmentId: this.currValue,
          distributorId: item.distributorId
        }
      })
      this.$jsonPost('/department/saveDistributorContracts', arr).then(res => {
        this.$Notice.success({ title: "新增成功" })
        this.selectedDepart = []
        this.name = ''
        this.closeModal()
        this.$emit('addSuccess')
      })
    },
    openModal() {
      this.modal = true;
      this.selectedDepart = []
      this.getDistributorData();
    },
    closeModal() {
      this.modal = false;
    },
  },
}
</script>
